<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮组</title>
    <style>

        .btn{

            width: 80px;
            height: 30px;
            border: 1px solid transparent;
            border-radius: 10px;
        }

        .btn-primary{
            background-color: #204d74;
            color: white;
        }

        .btn-success{
            background-color: lime;
            color: white;
        }

        .btn-danger{
            background-color: #ff1a43;
            color: white;
        }

        .btn-group .btn{
            position: relative;
            margin-left: -1px;
            float: left;

        }

        .btn-group .btn:first-child:not(:last-child){
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 10px;
            border-top-left-radius:10px ;
        }


        .btn-group .btn:last-child:not(:first-child){

            border-top-left-radius: 0;

            border-bottom-left-radius: 0;
            border-bottom-right-radius: 10px;
            border-top-right-radius:10px ;
        }

        .btn-group .btn:not(:last-child):not(:first-child){
            border-radius: 0;
        }

    </style>
</head>
<body>

<div class="btn-group">
    <button class="btn btn-primary">按钮1</button>
    <button class="btn btn-success">按钮2</button>
    <button class="btn btn-danger">按钮3</button>
</div>


</body>
</html>